import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    TextInput,
    FlatList,
    RefreshControl,
    ActivityIndicator,
    Alert,
    AsyncStorage,
    WebView
} from 'react-native';
import NavigationBar from '../common/NavigationBar';
import ViewUtils from '../common/util/ViewUtils';
const URL = 'http://www.imooc.com'
export default class WebviewTest extends Component {
    constructor(props){
        super(props)
        this.state = {
            url: URL,
            title: '',
            canGoBack: false
        }
    }
    goBack(){
        if(this.state.canGoBack) {
            this.webView.goBack();
        }
    }
    go(){
        this.setState({
            url: this.text
        })
    }
    onNavigationStateChange(e){
        this.setState({
            canGoBack: e.canGoBack,
            title: e.title
        })
    }
    render(){
        return (
            <View style={styles.container}>
                <NavigationBar
                    statusBar={{
                        backgroundColor:'#6495ED'
                    }}
                    title={'WebView'}
                    style = {{
                        backgroundColor: '#6495ED'
                    }}
                />
                <View style={styles.row}>
                    <Text
                        onPress={()=>{
                            this.goBack();
                        }}
                    >返回</Text>
                    <TextInput
                        style= {styles.input}
                        defaultValue={URL}
                        onChangeText={(text)=>{
                            this.text = text;
                        }}
                    />
                    <Text
                        onPress={()=>{
                            this.go();
                        }}
                    >前往</Text>
                </View>
                <WebView
                    ref= {webView=>this.webView=webView}
                    source={{uri: this.state.url}}
                    onNavigationStateChange={(e)=>{
                        this.onNavigationStateChange(e);
                    }}
                />
            </View>
        )
    }
}

styles = StyleSheet.create({
    container: {
        flex: 1
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        margin: 10
    },
    input: {
        height: 40,
        flex: 1,
        borderWidth: 1,
        margin: 2
    }
})